<template>
  <div class="">
    <dl class="m-categroy">
      <dt>按拼音首字母选择：</dt>
      <dd v-for="item in list" :key="item"> 
        <a :href="'#city-'+item"> {{item}} </a>
      </dd>
    </dl>
    <dl v-for="(item,idx) in block" :key="idx" class="m-categroy-section">
      <dt :id="'city-'+item.title">{{item.title}}</dt>
      <dd>
        <span v-for="c in item.city" :key="c">{{c}}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import pyjs from 'js-pinyin'
export default {
  data () {
    return {
      list:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      block: []
    }
  },
  async mounted () {
    const self = this
    let {status, data: {city}} = await self.$axios.get('/geo/city')
    if (status===200) {
      let p
      let c
      let q={}
      let blocks = []
      city.forEach(item => {
        p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0,1)
        c = p.charCodeAt(0)
        if (c>96&&c<123) {
          if (!q[p]) { q[p] = [] }
          q[p].push(item.name)
        }
      })
      for (const [k,v] of Object.entries(q)) {
        blocks.push({
          title: k,
          city: v
        })
      }
      blocks.sort((a,b)=>{
        return a.title.charCodeAt(0) - b.title.charCodeAt(0)
      })
      self.block = blocks
      console.log(blocks);
      
    }
  }
}
</script>

<style lang="scss">
  @import "@/assets/css/changeCity/categroy.scss";
</style>
